<template>

  <view class="container">

    <view v-if="openid" class="box" >
<!--    大大-->
      <view class="form-word">
        <image src="https://lirenhui.oss-cn-beijing.aliyuncs.com/live_static/desc.png" mode="widthFix" ></image>
      </view>
      <view class="form-box">
        <view class="top-word" style="margin-bottom: 10px">
          通过“伊姿漾”企业微信直播间观看直播并符合要求的朋友们，可提交个人信息免费领取直播间活动专属礼品，提交个人信息后将会有客服人员与您联系。
        </view>

        <u--form
            labelPosition="left"
            :model="formData"
            :rules="rules"
            ref="uForm"
        >
        <u-form-item
            prop="name"
            ref="item1" class="input"
        >
<!--          <u-icon
              name="account"
          ></u-icon>-->
          <u--input
              fontSize="14"
              class="input"
              prefixIcon="account"
              v-model="formData.name"
              border="none"
              prefixIconStyle="font-size: 22px;color: #909399;margin-left: 16px;"
              placeholder="请输入姓名"
          ></u--input>
        </u-form-item>
        <u-form-item
            prop="phone"
            ref="item1" class="input"
        >
          <u--input
              fontSize="14"
              prefixIcon="phone"
              v-model="formData.phone"
              prefixIconStyle="font-size: 22px;color: #909399;margin-left: 16px;"
              border="none"
              placeholder="请输入手机号"
              type="number"
          ></u--input>
        </u-form-item>
        <u-form-item
            prop="userInfo.name"
            ref="item1" class="input"
        >
        <u-button type="primary" size="small" text="确 认 提 交" @click="submit"></u-button>
        </u-form-item>
        </u--form>
      </view>
      <view class="lq-tip">
        * 请在直播结束后2小时内提交个人信息避免超时无法领取
      </view>

      <view class="footer-word">
        * 本次活动最终解释权归伊姿漾品牌方所有
      </view>
      <u-modal :show="errorMsgVis"  :showConfirmButton="false">
        <view class="slot-content">

          <view  class="error-modal">
            <image src="https://lirenhui.oss-cn-beijing.aliyuncs.com/live_static/al_back.png"></image>
            <view style="width: 100%;text-align: center;position: absolute;top:66%;color: #4B3A64;font-size: 16px">
              <view style="margin: 0 auto;width: 80%;text-align: center;">
                {{error}}
              </view>

            </view>
          </view>
          <view class="error-model-close" >
            <image src="https://lirenhui.oss-cn-beijing.aliyuncs.com/live_static/close.png" @click="errorMsgVis=false"></image>
          </view>

        </view>
      </u-modal>
      <u-toast ref="uToast"></u-toast>
      <u-notify ref="uNotify" >
        <template v-slot:icon>

          <u-icon name="checkmark-circle" color="#fff" size="40"></u-icon>
        </template>
      </u-notify>
    </view >

    <oauth-login type="redirectTo" login-page="/pages/live/pickup" @sucess-login="qwLogin"/>

  </view>

</template>

<script>
import oauthLogin from '../../components/wechat/qw-oauth-login.vue';

export default {
  data() {
    return {
      errorMsgVis:false,
      // title:'标题',
      error:'',
      formData:{
        name:'',
        phone:''
      },
      successMsg:false,
      openid:'',
      rules: {
        'name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'phone': [

            {
          type: 'string',
           min: 1,
          required: true,
          message: '请填写手机号',
          trigger: ['blur']

        },
          {
            trigger: ['blur'],
            validator: (rule, value, callback) => {
              console.log(value)
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: '手机号格式有误',
          },
        ],
      },
    }
  },
  components: {
    oauthLogin,
  },

  onReady() {
    //onReady 为uni-app支持的生命周期之一
    // console.log(this.openid)
    if (this.openid){
      setTimeout(()=>{
        this.$refs.uForm.setRules(this.rules)
      },1000)

    }
  },
  methods: {
    submit(){

      // this.successMsg = true;
      this.$refs.uForm.validate().then(res => {
        // uni.$u.toast('校验通过')
        let data = Object.assign(this.formData,{openid:this.openid})
        uni.showLoading()
        uni.request({
          url: 'https://yzylive.vjike.cn/api/live/register_rewards', //仅为示例，并非真实接口地址。
          method:'post',
          data: data,
          success: (res) => {
            uni.hideLoading()
            // console.log(res.data);
            if (res.data?.code === 0){
              this.errorMsgVis = true;
              this.error = res.data.msg;
            }else{
              this.$refs.uNotify.show({
                type: 'success',
                color: '#fff',
                bgColor: '#AE87D8',
                message: res.data?.msg,
                duration: 1000 * 12,
                fontSize: 16,
                safeAreaInsetTop:true
              })
            }
          }
        });
      })
    },
    qwLogin(openid){
      this.openid = openid
    }
  }
}
</script>

<style lang="scss">
page{
  height:100%;
}
.container{
  height: 100%;
}
.box{
  //height: 966rpx;
  background: url("https://lirenhui.oss-cn-beijing.aliyuncs.com/live_static/backgroup.jpg") ;
  height:1888rpx;
  width: 100%;
  background-position: center;
  background-size: cover;
}
.u-popup__content{
  background: transparent !important;
}
.u-line{
  border: 0 !important;
}
.error-modal{
  image{
    height: 260px;
    width: 346px;
  }
  width: 80%;margin: auto;position: relative
}
.error-model-close{
  text-align: center;
  image{
    margin-top: 40rpx;
    width: 70rpx;
    height: 70rpx;
  }

}
.form-word{
  position: relative;
  top: 940rpx;
  width: 90%;
  margin:0 auto;
  text-align: center;
  image{
    //height: 44rpx;
    width: 540rpx;
  }
}
.form-box{
  position: relative;
  top: 966rpx;
  width: 90%;
  margin: 0 auto;
  background: #fff;
  padding: 30rpx 40rpx;
  border-radius: 8rpx;
  .top-word{
    color: #4E504F;
    word-break: break-all;
    line-height: 48rpx;
    font-size: 29rpx;
    word-wrap: break-word;
    text-align: justify;
    //width: 90%;
  }
  .u-form-item__body{
    padding: 6px 0 !important;
  }

  .u-button {
    background-color: #AE87D8 !important;
    border: 0 !important;
    border-radius: 16px !important;
    height: 80rpx !important;
    text{
      font-size: 29rpx !important;
    }

  }
  .u-input{

    //margin-top: 6rpx;
    background: #F4F1F8;
    height: 100rpx;
    input{
      height: 80rpx;
      font-size: 29rpx !important;
      border-radius: 8rpx;
    }
  }

}

.u-notify{
  .u-icon__icon{
    width: 60rpx;
    height: 60rpx;
    margin-right: 30rpx;
    font-size: 72rpx !important;
  }

  .u-notify__warpper{
    justify-content: left !important;
    text-align: left !important;
    .u-notify__warpper__text{
      width: 64%;
      text-align: left;
      display: inline-block;
    }
  }
}

.u-toast__content__text {
  //font-weight: bold;
  font-size: 29rpx !important;
  line-height: 48rpx !important;
}
.lq-tip{
  position: relative;
  //top: 60vh;
  top: 966rpx;
  width: 90%;
  text-align: center;
  margin: 12px auto;
  font-size: 13px;
}
.footer-word{
  position: relative;
  top: 966rpx;
  margin-top: 44px;
  background: linear-gradient(to right,#ABA1C6,#C3B2DC);
  color: #fff;
  text-align: center;
  font-size: 13px;
  height: 34px;
  line-height: 34px;
}
</style>
